<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Interactivity</title>
  </head>
  <body>
    <!-- Hover State Styling -->
    <button
      class="bg-blue-500 text-white w-20 rounded-md hover:bg-red-700 hover:text-black"
    >
      submit
    </button>

    <!-- Focus State Styling -->
    <button
      class="bg-blue-500 text-white w-20 rounded-md focus:bg-green-700 focus:text-black"
    >
      submit
    </button>
    <input
      type="text"
      class="border-2 border-blue-500 rounded-md p-2 focus:border-yellow-400 focus:outline-none"
    />

    <!-- Active State Styling -->
    <button
      class="bg-blue-500 text-white w-20 rounded-md active:bg-green-700 active:text-black"
    >
      submit
    </button>

    <!-- Styling based on parent state -->
    <a
      class="group block rounded-md shadow-md shadow-slate-500 mt-10 ml-3 mx-auto max-w-ms space-y-3 hover:bg-gray-200"
    >
      <h3 class="group-hover:text-white">Titile</h3>
      <p class="group-hover:text-red-200">this is tailwindcss</p>
    </a>

    <!-- Pseudo Classes -->
    <ul>
      <li class="first:bg-red-400 odd:bg-green-400 even:bg-blue-500">
        tailwind css 1
      </li>
      <li class="first:bg-red-400 odd:bg-green-400 even:bg-blue-500">
        tailwind css 2
      </li>
      <li class="first:bg-red-400 odd:bg-green-400 even:bg-blue-500">
        tailwind css 3
      </li>
      <li class="first:bg-red-400 odd:bg-green-400 even:bg-blue-500">
        tailwind css 4
      </li>
      <li class="first:bg-red-400 odd:bg-green-400 even:bg-blue-500">
        tailwind css 5
      </li>
      <li class="first:bg-red-400 odd:bg-green-400 even:bg-blue-500">
        tailwind css 6
      </li>
    </ul>

    <!-- Appearance -->
    <!-- Use appearance-none to reset any browser specific styling on an element. This utility is often used when creating custom form components. -->
    <select class="appearance-none bg-blue-500 text-white p-2 rounded-md">
      <option value="1">tailwind css 1</option>
      <option value="2">tailwind css 2</option>
      <option value="3">tailwind css 3</option>
      <option value="4">tailwind css 4</option>
      <option value="5">tailwind css 5</option>
      <option value="6">tailwind css 6</option>
    </select>
    <br>
    <!-- Cursor -->
     <button class="bg-blue-500 text-white w-20 rounded-md cursor-wait">
      submit
    </button>

    <!-- Resize -->
     <div class="resize resize-x">行也思君，坐也思君</div>
     <div class="resize resize-y">行也思君，坐也思君</div>
     <div class="resize resize-both">行也思君，坐也思君</div>
     <div class="resize resize-none">行也思君，坐也思君</div>
     
    <!-- User Select -->
      <div class="select-none">行也思君，坐也思君</div>
     <div class="select-auto">行也思君，坐也思君</div>
     <div class="select-all">行也思君，坐也思君</div>
     <div class="select-text">行也思君，坐也思君</div>

    <!-- Smooth Scroll Example -->
  </body>
</html>

<!-- Cursor
  cursor-auto	          cursor: auto;
  cursor-default	      cursor: default;
  cursor-pointer	      cursor: pointer;
  cursor-wait	          cursor: wait;
  cursor-text	          cursor: text;
  cursor-move	          cursor: move;
  cursor-help	          cursor: help;
  cursor-not-allowed	  cursor: not-allowed;
  cursor-none	          cursor: none;
  cursor-context-menu	  cursor: context-menu;
  cursor-progress	      cursor: progress;
  cursor-cell	          cursor: cell;
  cursor-crosshair	    cursor: crosshair;
  cursor-vertical-text	cursor: vertical-text;
  cursor-alias	        cursor: alias;
  cursor-copy	          cursor: copy;
  cursor-no-drop	      cursor: no-drop;
  cursor-grab	          cursor: grab;
  cursor-grabbing	      cursor: grabbing;
  cursor-all-scroll	    cursor: all-scroll;
  cursor-col-resize	    cursor: col-resize;
  cursor-row-resize	    cursor: row-resize;
  cursor-n-resize	      cursor: n-resize;
  cursor-e-resize	      cursor: e-resize;
  cursor-s-resize	      cursor: s-resize;
  cursor-w-resize	      cursor: w-resize;
  cursor-ne-resize	    cursor: ne-resize;
  cursor-nw-resize	    cursor: nw-resize;
  cursor-se-resize	    cursor: se-resize;
  cursor-sw-resize	    cursor: sw-resize;
  cursor-ew-resize	    cursor: ew-resize;
  cursor-ns-resize	    cursor: ns-resize;
  cursor-nesw-resize	  cursor: nesw-resize;
  cursor-nwse-resize	  cursor: nwse-resize;
  cursor-zoom-in	      cursor: zoom-in;
  cursor-zoom-out	      cursor: zoom-out;
-->
